/**
 * @file 无障碍地图(可访问地图的示例)
 */
import "assets/styles/common/index.less";
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';

const map = new Map({
  layers: [
    // 创建瓦片图层
    new TileLayer({
      // 创建瓦片图层数据源
      source: new OSM(),
    }),
  ],
  target: 'map',  // 将地图和页面标签元素关联
  view: new View({  // 创建视图, 类似于望远镜, 我们通过望远镜看地图，可以拉近也可以拉远
    center: [0, 0], // 默认中心点
    zoom: 2,  // 默认缩放级别
  }),
});

document.getElementById('zoom-out').onclick = function () {
  const view = map.getView();
  const zoom = view.getZoom();
  view.setZoom(zoom - 1);
};

document.getElementById('zoom-in').onclick = function () {
  const view = map.getView();
  const zoom = view.getZoom();
  view.setZoom(zoom + 1);
};
